import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Alert, Button, Space, Tag, notification } from 'antd'
import PopImgShow from '@/components/PopImgShow';
import TableDataBlock from '@/components/TableDataBlock';
import RoleSetForm from './components/SetForm';
import { promoter_status } from '@/common/contact'
import CheckOrder from './components/CheckOrder'
const promoterCheckList = (props) => {
    const { loading, dispatch, list } = props;
    const childRef = useRef();
    const [visible, setVisible] = useState(false);
    const [checkVisible, setCheckVisible] = useState(false)
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        getCheckboxProps: (record) => {
            const { status } = record
            return {
                disabled: status !== '0',
                // Column configuration not to be checked
                id: record.id,
            };
        },
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
            });
        },
    });
    const extraBtn = [
        {
            text: '批量审核',
            onClick: () => {
                if (selectedRow.selectedRowKeys.length === 0) {
                    return notification.warn({
                        message: '温馨提示',
                        description: `请先选择要审核的用户`,
                    });
                } else {
                    setCheckVisible({
                        show: true,
                        detail: {},
                        selectIdList: selectedRow.selectedRowKeys.map(item => { return parseInt(item) })
                    })
                }
            },
        },
    ];

    // 搜索参数
    const searchItems = [
        {
            label: '邀请人',
            name: 'shareKeyword',
        },
        {
            label: '申请人',
            name: 'keyword',
            placeholder: "请输入申请人姓名/手机号"
        },
        {
            label: '申请时间',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },
        {
            label: '审核状态',
            name: 'status',
            type: 'select',
            select: promoter_status,
        },
    ];

    // table 表头
    const getColumns = [
        {
            title: '头像/昵称',
            width: 180,
            dataIndex: 'profile',
            render: (e, record) => {
                const { username } = record
                return <Space>
                    <PopImgShow url={e}></PopImgShow>
                    {username}
                </Space>
            }
        },
        {
            title: '姓名',

            dataIndex: 'username',
        },
        {
            title: '账号绑定手机号 ',

            dataIndex: 'mobile',
        },
        {
            title: '申请手机号 ',

            dataIndex: 'applyMobile',
        },

        {
            title: '累计消费金额',

            dataIndex: 'totalCost',
        },

        {
            title: '累计消费笔数',

            dataIndex: 'totalOrderAmount',
        },

        {
            title: '邀请人',

            dataIndex: 'shareUsername',
        },
        {
            title: '申请时间',
            sorter: true,
            dataIndex: 'createTime',
        },

        {
            title: '审核人',

            dataIndex: 'checkAdminName',
        },
        {
            title: '审核时间',

            dataIndex: 'checkTime',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return promoter_status[e]
            }
        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    auth: true,
                    visible: record.status === '0',
                    title: '审核',
                    click: () => {
                        setCheckVisible({
                            show: true,
                            detail: record,
                            selectIdList: [val]
                        })
                    },
                },
            ],
        },
    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();

    };

    return (
        <>
            <TableDataBlock
                cardProps={{ title: '审核列表' }}
                cRef={childRef}
                btnExtra={extraBtn}
                loading={loading}
                searchItems={searchItems}
                columns={getColumns}
                sortConfig={{
                    sortConstant: {
                        createTime: 'create_time',
                    }
                }}
                rowSelection={selectedRow}
                rowKey={(record) => `${record.id}`}
                dispatchType="promoter/fetchPromoterApplyInfo"
                {...list}
            ></TableDataBlock>
            <RoleSetForm
                childRef={childRef}
                visible={visible}
                onClose={() => setVisible(false)}
                handleCallback={handleCallback}
            ></RoleSetForm>
            <CheckOrder
                cleanSelect={() => {
                    setSelectedRow({
                        ...selectedRow,
                        selectedRowKeys: [],

                    })
                }}
                visible={checkVisible}
                onClose={() => setCheckVisible(false)}
                handleCallback={handleCallback}
            ></CheckOrder>
        </>
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.applyInfoList,
    loading: loading.models.promoter,
}))(promoterCheckList);
